import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:get/get.dart';
import 'package:simple_gradient_text/simple_gradient_text.dart';
import 'package:task_manager/app/core/utils/extensions.dart';
import 'package:task_manager/app/page/home/widgets/add_card.dart';
import 'package:task_manager/app/page/home/widgets/add_dialog.dart';
import 'package:task_manager/app/page/home/widgets/task_card.dart';

import '../../core/values/colors.dart';
import '../../data/task.dart';
import '../report/view.dart';
import 'controller.dart';

class Home extends GetView<HomeController> {
  Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Obx(
            () => IndexedStack(index: controller.tabIndex.value, children: [
          SafeArea(
            child: ListView(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Padding(
                      padding: EdgeInsets.all(4.0.wp),
                      child: Row(
                        children: [
                          GradientText(
                            '任务列表',
                            colors: const[
                              Color.fromARGB(255, 189, 195, 199),
                              Color.fromARGB(255, 44, 62, 80)
                            ],
                            style: TextStyle(
                              fontSize: 22.0.sp, fontWeight: FontWeight.bold,),
                          ),
                          Image.asset('assets/images/task.gif',scale: 5,)
                        ],
                      ),
                    ),
                  ],
                ),
                Obx(
                      () => GridView.count(
                    crossAxisCount: 2,
                    shrinkWrap: true,
                    physics: const ClampingScrollPhysics(),
                    children: [
                      ...controller.tasks
                          .map(
                            (element) => LongPressDraggable(
                          data: element,
                          onDragStarted: () =>
                              controller.changeDeleting(true),
                          onDraggableCanceled: (velocity, offset) =>
                              controller.changeDeleting(false),
                          onDragEnd: (details) =>
                              controller.changeDeleting(false),
                          feedback: Opacity(
                            opacity: 0.5,
                            child: TaskCard(task: element),
                          ),
                          child: TaskCard(task: element),
                        ),
                      )
                          .toList(),
                      AddCard()
                    ],
                  ),
                ),
              ],
            ),
          ),
          ReportPage(),
        ]),
      ),
      floatingActionButton: DragTarget<Task>(
        builder: (_, __, ___) => Obx(
              () => FloatingActionButton(
            backgroundColor: controller.deleting.value ? Colors.red : blue,
            onPressed: () {
              if (controller.tasks.isNotEmpty) {
                Get.to(() => AddDialog(), transition: Transition.downToUp);
              } else {
                EasyLoading.showInfo('请创建你的任务');
              }
            },
            child: Icon(controller.deleting.value ? Icons.delete : Icons.add),
          ),
        ),
        onAccept: (Task task) {
          controller.deleteTask(task);
          EasyLoading.showSuccess('删除成功'.tr);
        },
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: Theme(
        data: ThemeData(
            splashColor: Colors.transparent,
            highlightColor: Colors.transparent),
        child: Obx(
              () => BottomNavigationBar(
            onTap: (int index) => controller.changeTabIndex(index),
            currentIndex: controller.tabIndex.value,
            showSelectedLabels: false,
            showUnselectedLabels: false,
            items: [
              BottomNavigationBarItem(
                  label: 'Home',
                  icon: Padding(
                    padding:  EdgeInsets.only(right: 15.0.wp)
                        ,
                    child: const Icon(Icons.apps),
                  )),
              BottomNavigationBarItem(
                  label: 'Report',
                  icon: Padding(
                    padding:EdgeInsets.only(left: 15.0.wp)
                        ,
                    child: const Icon(Icons.data_usage),
                  )),
            ],
          ),
        ),
      ),
    );
  }
}
